<!--
 * @Author: zhangweinan
 * @Date: 2023-07-18 12:46:44
 * @LastEditors: zhangweinan
 * @LastEditTime: 2023-08-06 17:10:51
 * @Description: file content
 * @FilePath: \cty-admin\src\views\dataAnalysis\list.vue
-->
<template>
  <div class="main-page">
     <el-card shadow="never" class="income-tip">
     <el-row>
       <el-col v-for="(item,index) in incomeAvgInfo" :key="index" :span="6">
         <div class="name">
           {{ item.ispName}}
         </div>
         <div class="info">
           <span class="unit">平均:</span>
           {{ item.avgIncome }}
           <span class="unit">元/台</span>
         </div>
         <div class="info">
           <span class="unit">总计:</span>
           {{ item.totalIncome }}
           <span class="unit">元</span>
         </div>
         <div class="info">
           <span class="unit">数量:</span>
           {{ item.deviceCount }}
           <span class="unit">台</span>
         </div>
         <div class="info">
           <span class="unit">流量:</span>
           {{ item.totalBandwidth }}
           <span class="unit">G</span>
         </div>
       </el-col>
     </el-row>
   </el-card>

    <PageSearch
      :search-form-config="searchFormConfig"
      :form-data.sync="formData"
      @searchBtnClick="handleSearch"
      @exportBtnClick="handleExport"
    />
    <PageContent
      ref="pageContent"
      :form-data="formData"
      :content-table-config="contentConfig"
    >
      <template #bandwidth="scope">
        <span>{{ scope.row.bandwidth }} MB</span>
      </template>

      <template #realBandWith="scope">
        <span>{{ scope.row.realBandWith }} MB</span>
      </template>

    </PageContent>
  </div>
</template>

<script>
import {contentConfig} from "./config/content.config";
import Request from "@/utils/request";
import {searchFormConfig} from "./config/search.config";
import localCache from "@/utils/cache";

export default {
  name: "OrderList",
  components: {},
  data() {
    return {
      contentConfig,
      searchFormConfig,
      btnLoading: false,
      confirmBtnLoading: false,
      formData: {}, // 搜索表单数据
      initParams: {},
      incomeAvgInfo:[]
    };
  },

  watch: {},
  created() {
  },
  methods: {
    getAvgInfo (){
      let params = this.formData;
      Request.post("/bandwidth/dailyAvg", params).then((res)=>{
        this.incomeAvgInfo = res.data;
      })},
    handleSearch() {
      this.getAvgInfo();
      this.$refs.pageContent.queryTblMain();
    },

    handleExport() {
      const url = process.env.VUE_APP_BASE_API;
      this.axios({
        method: "get",
        url: url + "/bandwidth/dailyExport",
        responseType: "blob",
        params: this.formData,
        headers: {
          Authorization: localCache.getCache("token"),
        },
      }).then((res) => {
        this.$download.excel(res.data, "收益清单.xlsx");
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.income-tip{
  margin-top: auto;
  background-color: #f4f4f5;
}
</style>
